<!--
 * @Description: 我的已办任务
 * @Author: DHL
 * @Date: 2023-05-26 11:31:12
 * @LastEditors: DHL
 * @LastEditTime: 2023-07-28 10:17:27
-->
<template>
  <tw-layout @refresh="handleRefresh" @search="handleSearch" @reset="handleReset">
    <!-- 查询表单 -->
    <template #header>
      <el-form ref="searchFormRef" :model="searchForm" label-width="90px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input
                v-model="searchForm.procInstName"
                clearable
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="分类">
              <el-input
                v-model="searchForm.procDefName"
                clearable
                placeholder="请输入分类"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="任务名称">
              <el-input v-model="searchForm.name" clearable placeholder="请输入任务名称"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="经办人">
              <el-input
                v-model="searchForm.assigneeName"
                clearable
                placeholder="请输入经办人"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="被代理人">
              <el-input
                v-model="searchForm.ownerName"
                clearable
                placeholder="请输入被代理人"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="创建时间">
              <div class="flex-space-between">
                <el-date-picker
                  v-model="searchForm.createTimeBegin"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请输入创建时间-开始"
                ></el-date-picker>
                <div class="split-line">-</div>
                <el-date-picker
                  v-model="searchForm.createTimeEnd"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请输入创建时间-结束"
                ></el-date-picker>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="截止时间">
              <div class="flex-space-between">
                <el-date-picker
                  v-model="searchForm.dueDateBegin"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请输入截止时间-开始"
                ></el-date-picker>
                <div class="split-line">-</div>
                <el-date-picker
                  v-model="searchForm.dueDateEnd"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请输入截止时间-结束"
                ></el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>

    <!-- 数据表格 -->
    <tw-table
      ref="tableRef"
      :loading="loading"
      :options="tableOptions"
      :events="tableEvents"
      :data="tableData"
      @search="searchList"
    >
      <template #action="{ row }">
        <el-button link type="primary" @click="handleApprove(row)"> 查看 </el-button>
        <el-button link type="warning" @click="handleOpenFlowChart(row)"> 流程图 </el-button>
      </template>
    </tw-table>

    <twFlowchartPopup ref="twFlowchartPopupRef"></twFlowchartPopup>

    <component
      v-if="myComponent"
      ref="myComponentRef"
      :is="myComponent"
      @refreshTableData="handleRefresh"
    />
  </tw-layout>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss"></style>
